<template>
  <el-row style="height:100%">
    <page>
      <pageheader :isShow="false">
        会员详情
      </pageheader>
      <el-row :gutter="20" class="card-centent">
        <el-col :span="6" style="height: 100%;">
          <el-card class="left-box">
            <div class="details-header">
              <h6>会员基本信息</h6>
              <img src="static/img/A.png" alt="">
              <p>张三/男/20</p>
            </div>
            <div class="details-footer">
              <ul>
                <li>
                  <span class="details-footer-tit">手机号：</span>
                  <span class="details-footer-centent">1234567890</span>
                </li>
                <li>
                  <span class="details-footer-tit">会员号：</span>
                  <span class="details-footer-centent">1234567890</span>
                </li>
                <li>
                  <span class="details-footer-tit">入会日期：</span>
                  <span class="details-footer-centent">2020-03-24</span>
                </li>
              </ul>
            </div>

          </el-card>
        </el-col>

        <el-col :span="18" style="height: 100%;">
          <el-card class="right-box">
            <el-tabs v-model="routerIndex" type="card" @tab-click="handleClick">
              <el-tab-pane label="进场频次" name="memberDetails"></el-tab-pane>
              <el-tab-pane label="进店频次" name="areaInfo"></el-tab-pane>
              <el-tab-pane label="逛店轨迹" name="areaTrajectory"></el-tab-pane>
              <el-tab-pane label="品牌喜好" name="brandLike"></el-tab-pane>
              <el-tab-pane label="业态喜好" name="formatLike"></el-tab-pane>
            </el-tabs>
            <router-view></router-view>
          </el-card>
        </el-col>
      </el-row>
    </page>
  </el-row>
</template>
<style lang="scss" scoped>
  .card-centent{
    width: 100%;
    padding: 15px 0px;
    height: 90%;
    .left-box{
      text-align: center;
      height: 100%;
      .details-header{
        border-bottom:1px solid #ccc;
        h6{
          border-left:5px solid #0c78dd;
          text-align: left;
          padding-left: 10px;
        }
        img{
          width: 200px;
          display: inline-block;
          margin: 20px 0;
        }
        p{
          font-size: 18px;
          font-weight: 500;
          margin-bottom:10px;
        }
      }
      .details-footer{
        margin-top: 20px;
        ul{
          li{
            padding: 10px;
            .details-footer-tit{
              font-size: 16px;
              font-weight: 400;
            }
            .details-footer-centent{
              font-size: 18px;
              color:#847f8c;
            }
          }
        }
      }
    }
    .right-box{
      height: 100%;
    }
  }
</style>
<script>
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  export default {
    data() {
      return {
        pageTitle:'新增会员',
        isShow:false,
        isDisabled:false,//是否为修改页面
        tableData:[
          {
            base_url:'',
            name:'张三',
            age:'20',
            sex:'男',
            phone:'136666666666',
            firstDay:'2020-03-23',
            num:'1111111111',
          }
        ],
        pagination:{
          total:0,//总条目数
          currentPage:1,//当前页数
          pageSize:10,//每页显示条目个数
          pageSizes:[10,20,50,100],//每页显示个数选择器的选项设置
        },
        ruleForm:{
          imageUrl:'',
          imageUrlArr:[],
          name:'',
          age:'',
          sex:'1',
          phone:'',
          num:'',
          firstDay:'',
        },
        rules:{
          name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        },
        uploadUrl:'api/upload/face_img',
        uploadHeaders:{
          token:'IntForce ' + localStorage.entranceToken
        },
        routerIndex:'memberDetails',
        buttonPermissions:{
          isAdd:false,
          isDel:false,
          isModify:false,
        },
      }
    },
    components: {
      page,
      pageheader,
    },
    created() {
      //判断是否有按钮权限
      if(sessionStorage.buttonPermissions){
        this.configPermissions(JSON.parse(sessionStorage.buttonPermissions))
      }
      this.$Bus.$emit('Loading',false)
    },
    mounted() {
      //新增按钮点击事件
      this.$Bus.$on("memberPopUp", () => {
        this.isShow = true;
        this.isDisabled = false;
      });
    },
    methods:{
      //配置按钮权限，根据权限不同调整表头渲染参数
      configPermissions(val){
        let buttonPermissions = val
        let menuButtonPermissions = [];//按钮权限数组
        buttonPermissions.forEach(e =>{
          for(let key in e){
            if(key == 'menu_code'){
              menuButtonPermissions.push(e[key])
            }
          }
        });
        this.buttonPermissions.isAdd = menuButtonPermissions.includes('menberAdd') ? true : false; //是否有新增权限
        this.buttonPermissions.isModify = menuButtonPermissions.includes('memberModify') ? true : false; //是否有修改权限
        this.buttonPermissions.isDel = menuButtonPermissions.includes('memberDelete') ? true : false; //是否有删除权限
      },
      //表格序号显示方法
      indexMethod(index){
        return index + ((this.pagination.currentPage - 1) * this.pagination.pageSize) + 1
      },
      currentChange(){

      },
      sizeChange(){

      },
      detailsCreate(id){
        this.isShow = true;
        this.isDisabled = true
        this.pageTitle ='修改会员详情'

      },
      //删除会员；
      deleteMember(data){
        this.$confirm("是否删除会员‘"+ data.name+"’？", "提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center:true
        })
        .then(() => {
          this.$Bus.$emit('Loading',true)
          this.delData(data.id);
        })
        .catch(() => {
          return
        });
      },
      delData(id){
        let url='/sys/device_zone/delete_device?device_id='+id
        this.$api.delete(url)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          if(data.data) {
            this.$Bus.$emit('Loading',true);
            // this.getDevice(this.keywords,this.pagination.currentPage,this.pagination.pageSize,this.isHide)
            this.$message({
              message: "删除成功",
              type: "success"
            });
          }
        })
        .catch(err=>{
          this.$message.error('删除失败');
          this.$Bus.$emit('Loading',false);
        })
      },

      //保存按钮
      confirmDialog(){

      },
      //关闭模态框
      closeDialog(){
        this.$refs.ruleForm.resetFields()
      },
      getFile(file){
        const isImg = file.raw.type == 'image/jpeg' || file.raw.type == 'image/jpg' || file.raw.type == 'image/png';
        const isLt5M = file.raw.size / 1024 / 1024 < 5;
        if (!isImg || !isLt5M) {
          this.imgRemove()
          if (!isImg) {
            this.$message.error('上传识别图片只能是 png,jpg,jpeg 格式!');
          } else if (!isLt5M) {
            this.$message.error('上传识别图片大小不能超过 5MB!');
          }
          return;
        }
      },
      imgRemove(){
        this.ruleForm.imageUrl = '';
      },
      handleClick(tab,event){
        console.log(tab,'tab');
        console.log(event,'event');
        this.$router.push(tab.name)
      }
    }
  }
</script>
